<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
  <h1>我是一个购物车页面</h1>

  <div class="container"></div>

  <script>
    // 获取标签对象

    // 写入购物车内容div标签
    const oDivContainer = document.querySelector('.container');



    // 调用函数 动态渲染生成页面
    setPage();

    // 给 父级标签 添加点击事件 
    // 使用事件委托语法形式 给标签执行点击效果
    oDivContainer.addEventListener('click', event => {
      // 获取购物车数据
      let cart = JSON.parse(window.localStorage.cart);


      // 如果触发事件的标签 name属性值 是 all 点击的是 全选标签
      if (event.target.getAttribute('name') === 'all') {
        // 给 购物车中 所有商品 购买状态 赋值 全选标签checked属性值
        cart.forEach(item => {
          // item 是每一个 商品的数据
          // item.buy 是 购买状态
          // event.target 是 触发事件的标签 也就是 全选标签
          // event.target.checked 是 全选标签选中状态
          item.buy = event.target.checked;
        })


        // 如果触发事件的标签 name属性值 是 other 点击的是 单一商品选中标签
      } else if (event.target.getAttribute('name') === 'other') {
        // 获取点击标签存储的 goods_id 转化为 数值类型
        let goods_id = Number(event.target.getAttribute('goods_id'))
        console.log(goods_id);

        // 修改 购物车数组中 goods_id 相同的商品 购买状态

        // 通过for循环 循环遍历 数组
        for (let i = 0; i <= cart.length - 1; i++) {
          // i 是 数组中的索引下标 
          // cart[i] 是 每一个 商品信息 
          // cart[i].buy 是 这个 商品的购买状态
          // 需要给购买状态 赋值 选中标签 checked 属性值

          // 如果 循环的商品的goods_id 和 点击标签对应商品的goods_id 相同
          if (cart[i].goods_id === goods_id) {
            // 当前商品 购买状态 赋值 选中状态的属性值
            cart[i].buy = event.target.checked;

            // 通过break 终止之后的循环
            break;
          }
        }

        // 如果触发事件的标签 name属性值 是 - 点击的是 减标签
      } else if (event.target.getAttribute('name') === '-') {
        // 获取点击标签存储的 goods_id 转化为 数值类型
        let goods_id = Number(event.target.getAttribute('goods_id'))

        // 修改 购物车数组中 goods_id 相同的商品 购买数量累减1

        // 通过for循环 循环遍历 数组
        for (let i = 0; i <= cart.length - 1; i++) {
          // i 是 数组中的索引下标 
          // cart[i] 是 每一个 商品信息 
          // cart[i].buy 是 这个 商品的购买状态 
          // 需要给购买状态 赋值 选中标签 checked 属性值

          // 如果 循环的商品的goods_id 和 点击标签对应商品的goods_id 相同
          if (cart[i].goods_id === goods_id) {
            // 当前商品 购买状态 赋值 选中状态的属性值
            cart[i].number--;

            // 通过break 终止之后的循环
            break;
          }
        }


        // 如果触发事件的标签 name属性值 是 + 点击的是 加标签
      } else if (event.target.getAttribute('name') === '+') {
        // 获取点击标签存储的 goods_id 转化为 数值类型
        let goods_id = Number(event.target.getAttribute('goods_id'));

        // 修改 购物车数组中 goods_id 相同的商品 购买数量累加1

        // 通过for循环 循环遍历 数组
        for (let i = 0; i <= cart.length - 1; i++) {
          // i 是 数组中的索引下标 
          // cart[i] 是 每一个 商品信息 
          // cart[i].buy 是 这个 商品的购买状态 
          // 需要给购买状态 赋值 选中标签 checked 属性值

          // 如果 循环的商品的goods_id 和 点击标签对应商品的goods_id 相同
          if (cart[i].goods_id === goods_id) {
            // 当前商品 购买状态 赋值 选中状态的属性值
            cart[i].number++;

            // 通过break 终止之后的循环
            break;
          }
        }



        // 如果触发事件的标签 name属性值 是 del 点击的是 删除标签
      } else if (event.target.getAttribute('name') === 'del') {
        // 弹出确认框 点击确定 执行 删除操作
        if (window.confirm('您确定要删除这个商品吗?')) {
          // 获取点击标签存储的 goods_id 转化为 数值类型
          let goods_id = Number(event.target.getAttribute('goods_id'));
          console.log(goods_id);

          // 修改 购物车数组中 goods_id 相同的商品 执行 数组单元删除操作

          // 循环遍历 购物车数组 
          for (let i = 0; i <= cart.length - 1; i++) {
            // i 是 购物车数组的索引下标
            // cart[i] 是 每一个 购物车商品

            // 如果 购物车商品的goods_id 和 点击标签对应的goods_id 相同
            if (cart[i].goods_id === goods_id) {
              // 删除购物车中 这个商品
              cart.splice(i, 1);

              // 终止之后的循环
              break;
            }
          }
        }
      }

      // 将新的数组 存储给 本地的localStorage 
      window.localStorage.cart = JSON.stringify(cart);

      // 再次调用函数 动态渲染生成页面
      setPage();


    })




    //  动态生成页面函数  
    function setPage() {
      // 判断 有没有 购物车 
      if (window.localStorage.cart === undefined) {
        // 调用购物车数据 结果 是 undefined 
        // 证明还没有创建 购物车数据信息 生成对应内容
        oDivContainer.innerHTML = '<h1>您还没有购物记录 请您先去选中购买商品</h1>';

      } else {
        // 调用购物车数据 结果 不是 undefined 
        // 证明 已经创建了购物车 

        // 获取购物车数据信息 将json字符串还原为对应的数据
        const cart = JSON.parse(window.localStorage.cart);

        // 判断是不是 空购物车
        if (cart.length === 0) {
          // 如果是 空购物车 生成对应的页面内容
          oDivContainer.innerHTML = '<h1>您的购物车已经被您的爱人清空了 请您放心大胆的继续购物</h1>';


        } else {
          // 购物车 不是 空购物车 根据存储的商品信息 动态渲染生成页面

          // 变量要定义在 动态生成页面的函数中 
          // 每次东条生成页面 都要 重新计算 
          // 不能定义成 全局变量

          // 定义变量 存储 全选效果
          let bool = true;

          // 定义变量 存储 购买种类 购买数量 购买金额
          let buyType = 0;
          let buyNumber = 0;
          let buyMoney = 0;

          // 定义变量储存字符串

          // 第一个固定的部分 也就是 li标签之前的部分
          let str = `
              <div class="panel panel-info ">
                <div class="panel-body bg-info">
                  <div class="checkbox">
                    <label>
                      <input name="all" type="checkbox" value="">
                      全选
                    </label>
                  </div>
                </div>
                <div class="panel-footer">
                  <ul class="cart-list">
            `;

          // 中间的部分 是 li标签 是 根据 购物车数据 动态渲染生成的
          // 根据 购物车数组 循环遍历生成
          cart.forEach(item => {
            // 判断 当前商品购买状态
            if (item.buy) {
              // 购买状态是 true 也就是需要购买
              // 计算 购买种类 购买数量 购买金额

              // 每次购买一种商品 购买种类累加1
              buyType++;

              // 每次购买一种商品 累加购买数量
              buyNumber += item.number;

              // 累次购买一种商品 累加 购买数量*当前价格
              buyMoney += item.number * item.current_price;

            } else {
              // 购买状态是 false 也就是不购买
              // 给全选标签 赋值false
              bool = false;
            }

            // item 是 购物车数组中存储的 每一个商品的数据信息
            str += `
                  <li class="cart-item">
                    <div class="left">
                      <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                    </div>
                    <div class="right">
                      <div class="media">
                        <div class="media-left">
                          <a href="#">
                            <img class="media-object" src="${item.img_big_logo}" alt="...">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">${item.title}</h4>
                          <p>
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>${item.current_price}</span>
                            <del style="color:gray;font-size:10px">${item.price}</del>
                          </p>
                          <div class="btn-group pull-right" role="group" aria-label="...">
                            <button name="-" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.number === 1 ? 'disabled' : ''}>-</button>                                              
                            <button type="button" class="btn btn-default" disabled>${item.number}</button>
                            <button name="+" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.number === item.goods_number ? 'disabled' : ''}>+</button>
                          </div>
                          <button name="del" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>
  
                        </div>
                      </div>
                    </div>
                  </li>
              
              `;
          })

          // 第二个固定的部分 也就是 li标签之后的部分
          // 写入 计算好的 购买种类 购买数量 购买金额
          // 购买金额需要保留两位小数
          str += `
                </ul>
                  <div>
                    <h1>您一共购买了 ${buyType} 种 商品</h1>
                    <h1>您一共购买了 ${buyNumber} 件 商品</h1>
                    <h1>您一共需要支付 ${buyMoney.toFixed(2)} 元</h1>
                  </div>
                </div>
            
            `;

          // 将生成的字符串内容写入标签
          oDivContainer.innerHTML = str;

          // 获取 全选标签 设定 选中状态
          const oIptAll = oDivContainer.querySelector('[name="all"]');
          oIptAll.checked = bool;

        }

      }
    }
  </script>
</body>

</html>